<template>
  <div
    :id="idString"
    style="height:280px;"
  >
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      xAxisData: {
        type: Array,
        default: () => ['']
      },
      yAxisData: {
        type: Array,
        default: () => []
      },
      labelTitle: {
        type: String,
        default: '收入'
      }
    },
    data () {
      return {
        idString: '',
        Chart: null
      }
    },
    created () {
      this.idString = 'chart_' + Math.random().toString(32).substr(6)
    },
    watch: {
      info: {
        handler: function (val) {
          if (val && this.Chart) {
            this.setChartOption()
          }
        },
        deep: true,
        immediate: true,
      },
    },
    computed: {
      chartOption () {
        return {
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.60)', // 设置背景颜色
            textStyle: {
              color: '#ffffff',
              fontSize: 14
            },
            borderColor: 'rgba(255, 255, 255, .16)',
            axisPointer: {
              lineStyle: {
                color: '#33317e',
                type: 'solid'
              }
            },
            formatter: (params, ticket, callback) => {
              let htmlStr = ''
              htmlStr += this.filterMonth(params[0].dataIndex)
              for (let i = 0; i < params.length; i++) {
                let param = params[i]
                let value = param.value // y轴值
                let color = param.color // 图例颜色
                htmlStr += '<div>'
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  color +
                  ';"></span>' // 一个点
                htmlStr += `<span style="color:#ffffff">${this.labelTitle} : ${value} 元</span>` // 圆点后面显示的文本
                htmlStr += '</div>'
              }
              return htmlStr
            }
          },
          color: [
            'rgb(0, 172, 73)',
            // 'rgb(56, 154, 255)',
            // 'rgb(162, 88, 236)',
            // 'rgb(255, 152, 6)'
          ],
          grid: {
            top: '5%',
            left: '12%',
            right: '4%',
            bottom: '18%',
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#33317E'
                }
              },
              axisLabel: {
                interval: 0,
                color: '#000000',
                textStyle: {
                  fontSize: 12
                },
                // rotate: 25,
              },
              splitLine: {
                show: true,
              },
              axisTick: {
                show: true
              },
              boundaryGap: false,
              data: this.info ? this.info.xAxis.map(item => `${item.slice(5, 7) < 10 ? item.slice(6, 7) : item.slice(5, 7)}月`) : [],
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#33317E'
                }
              },
              splitNumber: 4,
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgb(221, 228, 241)',
                  type: 'solid'
                }
              },
              axisLabel: {
                color: '#000000',
                textStyle: {
                  fontSize: 14
                },
                formatter: '{value}'
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '环比',
              type: 'line',
              showSymbol: true,
              symbolSize: 8,
              symbol: 'circle',
              lineStyle: {
                color: '#33317E'
              },
              itemStyle: {
                color: '#33317E',
                borderColor: '#ffffff',
                borderWidth: 2
              },
              data: this.info ? this.info.yAxis : [] // data.values
            }

          ]
        }
      },
      info () {
        return {
          xAxis: JSON.parse(JSON.stringify(this.xAxisData)),
          yAxis: JSON.parse(JSON.stringify(this.yAxisData))
        }
      },
    },
    async mounted () {
      this.Chart = echarts.init(document.getElementById(this.idString))
      window.addEventListener('resize', this.draw)
      this.Chart.clear()
      this.setChartOption()
    },
    beforeDestroy () {
      window.removeEventListener('reisze', this.draw)
    },
    methods: {
      draw () {
        if (this.Chart) {
          this.Chart.resize()
        }
      },
      setChartOption () {
        this.Chart.setOption(this.chartOption)
      },
      filterMonth (index) {
        return this.info.xAxis[index].replace('-', '年') + '月'
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
